<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{count}}</h1>
    </div>
</body>
<script>
    const component = {
        data() {
            return {
                count: 100
            }
        },
        methods: {},
        beforeCreate() {
            console.log('在组件实例初始化完成之后立即调用,创建之前。');
        },
        created() {
            // 之前老程序员会在这里做数据请求
            console.log('在组件实例处理完所有与状态相关的选项后调用。');
        },
        beforeMount() {
            console.log('在组件被挂载之前调用。');
        },
        mounted() {
            console.log('在组件被挂载之后调用。');
            // 页面中的数据请求可以在这里进行发送
        },
        beforeUpdate() {
            console.log('在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。');
        },
        updated() {
            console.log('在组件因为一个响应式状态变更而更新其 DOM 树之后调用。');
            // 不要在这里更新组件中的响应式数据，会导致无限调用
            // this.count++
        },
        beforeUnmount() {
            console.log('在一个组件实例被卸载之前调用。');
        },
        unmounted() {
            console.log('在一个组件实例被卸载之后调用。');
        },
    }
    // 创建 app 实例
    const app = Vue.createApp(component)
    // 将 app 实例挂载到模板中
    app.mount('#app')


    setTimeout(() => {
        // 卸载组件
        app.unmount('#app')
    }, 5000);


</script>

</html>